<!doctype html>
<html lang="en">

<head>
  <title>Make manifold glTF</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" type="image/png" href="https://elalish.github.io/manifold/samples/models/favicon.png" />
  <style>
    body {
      background-color: #f7f7f7;
      font-family: 'Rubik', sans-serif;
      font-size: 16px;
      line-height: 24px;
      color: rgba(0, 0, 0, .87);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
    }

    p {
      max-width: 700px;
      margin: 1em;
      text-align: left;
    }

    model-viewer {
      display: block;
      width: 100vw;
      height: 100vw;
      max-width: 600px;
      max-height: 600px;
      border: 3px solid black;
      border-radius: 10px;
      margin-top: 5px;
    }

    #poster {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
    }
  </style>
</head>

<body>
  <p>Load a glTF/GLB model and our <a href="https://github.com/elalish/manifold">Manifold</a> library will attempt to
    merge it into a set of manifold objects. If the model is water-tight, you can download the new GLB which will have
    our <a href="https://github.com/KhronosGroup/glTF/pull/2286">EXT_mesh_manifold</a> extension, thus preserving the
    manifold data without losing any mesh properties.</p>
  <p> If the View Manifold GLB checkbox is enabled, then some meshes in the model have open edges and don't represent a
    solid object. Check this box to see only the manifold parts, which will also enable them to be downloaded. If the
    download button is still disabled, it means there were no manifold meshes found. </p>
  <input type="file" id="input">
  <button id="download" disabled>Download manifold GLB</button>
  <input type="checkbox" id="viewFinal" disabled>
  <label for="viewFinal">View Manifold GLB</label>
  <model-viewer camera-controls shadow-intensity="1" tone-mapping="neutral" alt="Loaded GLB model">
    <span id="poster" slot="poster">Drop a GLB here</span>
  </model-viewer>
</body>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
<script type="module" src="make-manifold.ts"></script>

</html>